<template>
	<view class="">
		<view class="info-panel">
			<u-navbar title=" " bgColor="transparent" :autoBack="true" leftIconColor="#fff" :placeholder="true"/>
			<view class="padding-30 line-white">
				<view class="flex justify-between align-center">
					<view class="flex flex--row lh-40">
						<text>{{userInfo.nickName}}</text>
						<text class="line-gray fsize-24">{{userInfo.sex===1?"男":userInfo.sex===2?"女":"未知"}} {{userInfo.mobile}}</text>
					</view>
					<u-avatar 
						:src="userInfo.avatarImage" 
						defaultUrl="/static/logo.png"
						ize="50" 
						@click="$u.route('/pages/customer/information', {id: userInfo.id})" 
					/>
				</view>
				<view class="mt-60 border-b pb-20 flex">
					<view class="flex align-center">
						<uni-icons custom-prefix="iconfont" type="icon-grade" size="24" color="#d39454" />
						<text>会员等级 · {{userInfo.gradeTitle}}</text>
					</view>
					<!-- <view class="flex align-center ml-60" @click.stop="phoneCall(userInfo.mobile)">
						<uni-icons custom-prefix="iconfont" type="icon-phone" size="24" color="#7bc965" />
						<text>打电话</text>
					</view> -->
				</view>
				<view class="mt-20 lh-40">
					<u-row gutter="10">
						<u-col span="4">
							<view>{{userInfo.quantity}}</view>
							<view class="line-gray fsize-24">剩余项目</view>
						</u-col>
						<u-col span="4">
							<view>{{userInfo.consumeAmount}}</view>
							<view class="line-gray fsize-24">累计消费金额</view>
						</u-col>
						<u-col span="4">
							<view>{{userInfo.consumeTimes}}</view>
							<view class="line-gray fsize-24">消费次数</view>
						</u-col>
					</u-row>
					<view class="mt-20">
						<u-row gutter="10">
							<u-col span="4">
								<view @click="showRecharge=true">{{userInfo.balance}}</view>
								<view class="flex fsize-24" @click="showRecharge=true">
									<u-icon name="red-packet-fill" label="当前余额" labelPos="left" labelColor="#aaa" color="#aaa"></u-icon>
								</view>
							</u-col>
							<u-col span="4">
								<view>{{userInfo.couponCount}}</view>
								<view class="line-gray fsize-24">优惠卷</view>
							</u-col>
							<u-col span="4">
								<view>{{userInfo.lastConsumeTime}}</view>
								<view class="line-gray fsize-24">最近消费时间</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
		<view class="pb-20 bg-white">
			<u-tabs 
				lineColor="#e54d42" 
				:activeStyle="{color:'#e54d42'}"
				lineWidth="35" 
				:scrollable="false" 
				:list="tags" 
				:current="current"
				@change="tagChange"
			/>
		</view>
		<view class="my-list pl-0 pr-0">
			<view class="pl-30 pr-30 pb-30 bg-white" v-if="current===3 || current===1">
				<view 
					class="line-red text-align-center pb-20 pt-20 border-t border-b border-l border-r border-radius-6"
					@click="$u.route(current===3?'/pages/customer/accessLog':'/pages/customer/serviceLog',{userId:userInfo.id, type:'1'})">
					{{current===3?'新增回访记录':'新增服务日志'}}
				</view>
			</view>
			<u-list :height="swiperHeight" @scrolltolower="scrolltolower" v-if="dataList.length > 0">
				<u-list-item v-for="(item, index) in dataList" :key="index" >
					<view class="pl-20 pr-20" v-if="current===0">
						<view 
							class="gift-bag-item" 
							@click="$u.route('/pages/project/card/detail', {id:item.id})"
							:style="{background: item.status===2?item.bgColor:'#cdcbcb',color:item.status===6?'#3a3737':''}"
						>
							<view class="flex flex--row">
								<text>{{item.cardItemName}}<text class="ml-20" v-if="item.status===6">(已禁用)</text></text>
								<text class="fsize-24 mt-10">含{{item.projectCount}}种明细 · 共{{item.quantityAll}}次 · 剩余{{item.quantity}}</text>
							</view>
							<view class="flex justify-between align-center">
								<text class="fsize-24">有效期:{{item.validityDateText}}</text>
								<view class="flex justify-end">
									<!-- <view 
										v-if="item.status===2" 
										class="obtn" 
										@click.stop="$u.route('/pages/selectPage/usingCards', {id: item.id, userId: userInfo.id})">
										划卡
									</view> -->
									<view class="obtn" @click.stop="openMenu(item,index)">更多</view>
								</view>
							</view>
						</view>
					</view>
					<view 
						class="bg-white padding-20 border-t" v-if="current===1" 
						@click.stop="$u.route('/pages/customer/serviceLog',{userId:userInfo.id,id:item.orderId, type:'3'})" >
						<view class="text-ellipsis">
							<text>服务项目:</text>
							<text v-for="(jm, jx) in item.items" :key="jx">
								{{jm.projectName}}
								<text v-if="jx !== item.items.length-1">,</text>
							</text>
						</view>
						<view class="mt-20 flex justify-between align-center">
							<view class="line-gray fsize-24 w-100 text-ellipsis">
								<text>{{item.serviceTime.slice(0, 10)}} · 服务人员:</text>
								<text v-for="(jm, jx) in item.items" :key="jx">
									{{jm.staffName}}
									<text v-if="jx !== item.items.length-1">,</text>
								</text>
							</view>
							<view class="flex justify-end shink0 width-340" @click.stop>
								<view>
									<u-tag 
										text="删除" 
										plain 
										type="error" 
										shape="circle" 
										@click="onDel('ServiceLog', index)"
									/>
								</view>
								<view class="ml-20">
									<u-tag 
										text="编辑" 
										plain 
										type="primary" 
										shape="circle" 
										@click="$u.route('/pages/customer/serviceLog',{userId:userInfo.id,id:item.orderId, type:'2'})" 
									/>
								</view>
							</view>
						</view>
					</view>
					<view 
						class="bg-white flex justify-between align-center padding-20 border-t" 
						v-else-if="current===2"
						@click="toOrderDetai(item.orderType, item.orderId)"
					>
						<view class="">
							<view>{{item.orderText}}</view>
							<view class="mt-10 line-gray fsize-24">{{item.createTime}}</view>
						</view>
						<text class="line-red">￥{{item.realAmount}}</text>
					</view>
					<view class="bg-white padding-20 border-b" v-if="current===3">
						<view class="flex justify-between align-center">
							<view>{{item.type===1?'电话回访':item.type===2?'短信回访':item.type===3?'微信回访':'其他回访'}}</view>
							<view class="mt-10 line-gray fsize-24">{{item.createTime}}</view>
						</view>
						<view class="flex justify-end mt-20">
							<view>
								<u-tag 
									text="删除" 
									plain 
									type="error" 
									shape="circle" 
									@click="onDel('AccessLog', index)"
								/>
							</view>
							<view class="ml-20">
								<u-tag 
									text="编辑" 
									plain 
									type="primary" 
									shape="circle" 
									@click="$u.route('/pages/customer/accessLog',{userId:userInfo.id,id:item.id })" 
								/>
							</view>
						</view>
					</view>
				</u-list-item>
				<!-- <u-loadmore 
					:status="loadmore.status" 
					:icon-type="loadmore.iconType" 
					:load-text="loadmore.loadText.loadText" 
					margin-top="20"
					margin-bottom="20" 
				/> -->
			</u-list>
			<u-empty v-if="dataList.length === 0" mode="list" marginTop="40" />
		</view>
		<u-popup 
			:show="showRecharge" 
			@close="onCloseRecharge"
			mode="center"
			:safeAreaInsetBottom="false"
			:round="10"
		>
			<view class="padding-20">
				<u--form labelPosition="left" :model="rechargeForm" ref="uForm" errorType="toast" labelWidth="80">
					<view class="pb-20 border-b fweight-600">充值余额</view>
					<u-form-item label="当前余额" prop="currentBalance" borderBottom>
						<u-input v-model="rechargeForm.currentBalance" border="none" disabled disabledColor="#fff"></u-input>
					</u-form-item>
					<u-form-item label="操作类型" prop="type" borderBottom>
						<u-radio-group v-model="rechargeForm.type" activeColor="#e54d42">
							<u-radio label="充值" name="1"></u-radio>
							<u-radio label="扣除" name="2"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="操作金额" prop="balance" borderBottom>
						<u-input v-model="rechargeForm.balance" type="digit" border="none" activeColor=""></u-input>
					</u-form-item>
					<u-form-item label="变动说明" prop="memo" borderBottom>
						<u-input v-model="rechargeForm.memo" border="none"></u-input>
					</u-form-item>
				</u--form>
				<view class="flex justify-end mt-20">
					<view><u-button text="取消" @click="onCloseRecharge"></u-button></view>
					<view class="ml-20"><u-button color="#e54d42" text="确定" @click="onRecharge"></u-button></view>
				</view>
			</view>
		</u-popup>
		<u-action-sheet 
			:actions="cardMenuList" 
			:description="dataList[cardIx].cardItemName" 
			:show="showCardMenu" 
			:closeOnClickOverlay="true"
			:closeOnClickAction="true"
			cancelText="取消"
			@close="showCardMenu=false"
			@select="onSelectOpttion"
		/>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data(){
			return {
				showCardMenu: false,
				showRecharge: false,
				cardIx: null,
				cardMenuList:[
					{name:'暂停', value: 1},
					{name:'修改截止日期', value: 2},
					{name:'退卡', value: 3}
				],
				cardId: 0,
				userInfo:{},
				current: 0,
				dataList:[],
				oId: null,
				tags: [
					{ name: '会员卡'}, 
					{ name: '服务日志'}, 
					{ name: '消费记录'}, 
					{ name: '回访记录'}, 
				],
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				rechargeForm:{
					id: 0,
					type: '1',
					memo:'',
					currentBalance: 0.00,
					balance: 0.00,
				},
				searchData:{
					page: 1,
					limit: 20,
				}
			}
		},
		onLoad(opt) {
			const that = this
			that.oId = opt.id
			this.rechargeForm.id = that.oId
			this.getDetails(that.oId)
			uni.$on('upUserData', obj=>{
				that.getDetails(that.oId)
			})
			uni.$on('uplist', type=>{
				that.current = type
				that.getDetails(that.oId)
				that.upPageList()
			})
		},
		onUnload() {
			uni.$off('upUserData')
			uni.$off('uplist')
		},
		methods:{
			onRtype(e){
				console.log(e)
			},
			onRecharge(){
				const that = this
				if(uni.$u.test.isEmpty(this.rechargeForm.memo)){
					this.$refs.uToast.show({message:'说明变动不能为空'})
				}else {
					if(that.rechargeForm.type === '2'){
						this.rechargeForm.balance = `-${this.rechargeForm.balance}`
					}
					this.$reqJsonPost('UserDoEditBalance',  this.rechargeForm).then(res=>{
						this.$refs.uToast.show({
							message:'操作成功!',
							complete() {
								that.getDetails(that.oId)
								that.rechargeForm.balance = 0
								that.rechargeForm.type = '1'
								that.showRecharge = false
							}
						})
					})
				}
			},
			onCloseRecharge(){
				this.rechargeForm.balance = 0
				this.showRecharge = false
			},
			toOrderDetai(type, sourceId){
				if(type === 11){
					uni.$u.route('/pages/order/details/projectDetails',{id:sourceId})
				}else if(type === 12 ){
					uni.$u.route('/pages/order/details/cardDetails',{id:sourceId})
				}else if(type === 1){
					uni.$u.route('/pages/order/details/productDetails',{id:sourceId})
				}
			},
			openMenu(row, ix){
				this.showCardMenu = true
				this.cardIx = ix
				if(row.status === 6){
					this.cardMenuList[0].name = '启用'
				}else if(row.status === 2){
					this.cardMenuList[0].name = '暂停'
				}
			},
			onSelectOpttion(e){
				let that = this
				if(e.value === 2){
					uni.$u.route('/pages/customer/dateModified', { 
						orderId:that.dataList[that.cardIx].id,
						validityDate:that.dataList[that.cardIx].validityDate,
						cardItemName:that.dataList[that.cardIx].cardItemName,
						status: that.dataList[that.cardIx].status,
					})
				}else if(e.value === 1){
					uni.showModal({
						title: '提示',
						content: `确定${that.dataList[that.cardIx].status===2?'暂停':'启用'}【${that.dataList[that.cardIx].cardItemName}】吗?`,
						success: function (res) {
							if (res.confirm) {
								that.$reqJsonPost('CardOrderDoEdit',{
									orderId: that.dataList[that.cardIx].id,
									status: that.dataList[that.cardIx].status===2?6:2,
									validityDate: that.dataList[that.cardIx].validityDate
								}).then(res=>{
									that.getPageList()
								})
							} 
						}
					})
				}else if(e.value === 3){
					uni.$u.route('/pages/customer/refundCard', {
						orderId: that.dataList[that.cardIx].id,
						cardItemName: that.dataList[that.cardIx].cardItemName,
					})
				}
			},
			onDel(ty, ix){
				let that = this
				uni.showModal({
					title: '提示',
					content: `确定删除该${ty==='ServiceLog'?'服务日志':'回访记录'}吗?`,
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost(ty==='ServiceLog'?'UserServiceNoteDoDelete':'UserVisitDoDelete',{
									id:ty==='ServiceLog'?that.dataList[ix].orderId:that.dataList[ix].id,
							}).then(res=>{
								that.dataList.splice(ix, 1)
							})
						}
					}
				})
			},
			tagChange(e){
				if(this.current === e.index) return
				this.current = e.index
				this.upPageList()
			},
			upPageList(){
				this.dataList = []
				this.searchData.page = 1
				switch (this.current){
					case 0:
						this.getPageList()
						break;
					case 1:
						this.getUserServiceNotePageList()
						break;
					case 2:
						this.dataList = []
						this.getBillPaymentsPageList()
						break;
					case 3:
						this.dataList = []
						this.getVisitPageList()
						break;
				}
			},
			phoneCall(num){
				uni.makePhoneCall({ phoneNumber: num })
			},
			getDetails(id){
				this.$reqJsonPost('UserGetDetails',{id:id}).then(res => {
					const userGrade = res.data.userGrade.find(obj=>obj.id === res.data.model.grade)
					this.rechargeForm.currentBalance = res.data.model.balance
					this.userInfo = {
						...res.data.model,
						...res.data.userExpand,
						lastConsumeTime: res.data.userExpand.lastConsumeTime==='0001-01-01'?'--':res.data.userExpand.lastConsumeTime,
						gradeTitle:userGrade?userGrade.title:'--'
					}
					this.getPageList()
				})
			},
			getUserServiceNotePageList(){
				this.$reqPost('UserServiceNoteGetPageList', {
					userId: this.userInfo.id, 
					page: 1,
					limit: 999,
				}).then(res => {
					this.dataList = res.data
				})
			},
			getPageList() {
				this.$reqJsonPost('UserCardsList', {id: this.userInfo.id}).then(res => {
					this.dataList = res.data
				})
			},
			getBillPaymentsPageList(){
				this.$reqPost('FinanceAccountGetPageList', {userId: this.userInfo.id}).then(res => {
					this.dataList = res.data
				})
			},
			getVisitPageList(){
				this.$reqPost('UserVisitPageList', {...this.searchData, userId: this.userInfo.id}).then(res=>{
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.loadmore.status = 'loadmore'
						this.searchData.page++
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore'
					}
				})
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					if(this.current === 2){
						this.getVisitPageList()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-panel{
		background: linear-gradient(to bottom right,#305e81,#40348c);
	}
</style>